<template>
  <div class="container">
    <div>
      <el-row :gutter="12">
        <!-- <el-col :span="6">
          <el-form ref="form" :model="form">
            <el-form-item label="查询类型：">
              <el-select
                v-model="form.orderType"
                placeholder="请选择查询类型"
                filterable
                clearable
                @change="getTableData()"
                style="width: 10.9vw"
              >
                <el-option
                  v-for="item in OrderTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col> -->
        <el-col :span="6">
          <el-form ref="form" :model="form">
            <el-form-item label="所属班组：">
              <el-select
                v-model="form.CLIENT_NO"
                placeholder="请选择"
                style="width: 10.9vw"
                filterable
              >
                <el-option
                  v-for="item in ClientNoAll"
                  :key="item.CLIENT_NO"
                  :label="item.CLIENT_NAME"
                  :value="item.CLIENT_NO"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form ref="form" :model="form">
            <el-form-item label="工种：">
              <el-select
                v-model="form.workType"
                placeholder="请选择工种"
                filterable
                clearable
                @change="$forceUpdate()"
                style="width: 10.9vw"
              >
                <el-option
                  v-for="item in WorkTypeList"
                  :key="item.label"
                  :label="item.label"
                  :value="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="4">
          <el-form ref="form" :model="form" style="float: left">
            <el-button size="mini" type="primary" @click="getTableData"
              >查 询</el-button
            >
          </el-form>
        </el-col>
      </el-row>
      <el-row :gutter="12">
        <el-col :span="6">
          <el-form ref="form" :model="form" :label-width="labelwidth">
            <el-form-item label="人员姓名：">
              <el-input
                v-model="form.name"
                placeholder="请输入人员姓名"
                style="width: 10.9vw"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form ref="form" :model="form">
            <el-form-item label="月份：">
              <el-date-picker
                v-model="form.workmonth"
                type="month"
                style="width: 10.9vw"
                value-format="yyyy-MM"
                :picker-options="pickerOptions"
              ></el-date-picker>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <el-table
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
      border
    >
      <el-table-column
        prop="WORKDATE"
        label="日期"
        align="center"
        
      ></el-table-column>
      <el-table-column
        prop="LNAME"
        label="标段名称"
        align="center"
        
      ></el-table-column>
      <el-table-column
        prop="CLIENT_NAME"
        label="班组名称"
        align="center"
        
      ></el-table-column>
      <el-table-column
        prop="SNAME"
        label="班次名称"
        align="center"
        
      ></el-table-column>
      <el-table-column
        prop="ONWORKTIME"
        label="上班时间"
        align="center"
        
      ></el-table-column>
      <el-table-column
        prop="OFFWORKTIME"
        label="下班时间"
        align="center"
        
      ></el-table-column>
      <el-table-column
        prop="NAME"
        label="姓名"
        align="center"
        
      ></el-table-column>
      <el-table-column
        prop="GNAME"
        label="网格名称"
        align="center"
        
      ></el-table-column>
      <el-table-column
        prop="ROADNAME"
        label="道路名称"
        align="center"
        
      ></el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import '@/assets/css/common.css'
import { formatDate } from '@/common/js/date.js'
export default {
  data () {
    return {
      currentPage: 1, //初始页
      pageSize: 10,    //    每页的数据
      tableData: [],
      tableDataAlarm: [],
      ClientNoAll: [],
      WorkTypeList: [{
        label: '环卫工'
      }, {
        label: '班组长'
      }],
      form: {
        orderType: '1',
        CLIENT_NO: '00000',
        workType: '环卫工',
        name: '',
        // datetype: 'month',
        dateformat: 'yyyy-MM',
        workmonth: formatDate(new Date(), 'yyyy-MM'),//月
      },
      //查询条件
      TransSearch: {
        ID: '0',
        ClientNo: localStorage.getItem('CLIENT_NO'),
        point: '',
        workmonth: '',
        CPH: '',
        name: '',
        CLIENT_NO: '',
        OIL_TYPE: ''
      },
      formRow: {},
      OrderTypeList: [{
        value: '1',
        label: '每日作业计划'
      }, {
        value: '2',
        label: '每日排班概览'
      }, {
        value: '3',
        label: '保洁员月排班表'
      }, {
        value: '4',
        label: '每日各班次排班表'
      }],
      showOrderDetail: false,
      showReject: false,
      showAlarm: false,
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now();;
        },
      }
    }
  },
  created() {

    this.getClientInfoAll();
  },
  mounted () {
    this.getTableData();
  },
  methods: {
    //获取所属区域信息-全
    async getClientInfoAll () {
      const { data } = await this.$Http.get('DataListCompany/GetTeamListApi?ClientNo=' + localStorage.getItem('CLIENT_NO'))
      this.ClientNoAll = data
      this.ClientNoAll.push({
          CLIENT_NO:"00000",
          CLIENT_NAME:"全部"
        })
    },
    async getTableData () {
      this.tableData = []
      var url = 'Worker/GetCalendarPlanInfoPB1?ClientNo=' + this.form.CLIENT_NO
        + '&workType=' + this.form.workType + '&name=' + this.form.name
        + '&workmonth=' + this.form.workmonth
      const { data } = await this.$Http.get(url)
      this.tableData = data
    },
    async getTableDataAlarm () {
      var url = 'Sign/GetPointCollectionAlarmInfo?ClientNo=' + localStorage.getItem('CLIENT_NO')
      const { data } = await this.$Http.get(url)
      this.tableDataAlarm = data
    },
    showTableDataAlarm () {
      this.getTableDataAlarm();
      this.showAlarm = true;
    },
    // 详情
    handleShowReject (index, row) {
      this.formRow = Object.assign({}, row);
      this.showReject = true;
    },
    handleShowOrderDetail (index, row) {
      this.formRow = Object.assign({}, row);
      this.showOrderDetail = true;
    },
    // 签批
    handleSign (index, row) {
      this.$confirm('确认同意此申请？', '提示', {
        confirmButtonText: '同意',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.updateApplyStatus(row.POINT_ID)
      }).catch(() => {
      });
    },
    formatterBucketType (row, column, cellValue, index) {
      switch (cellValue) {
        case '1':
          return '120L';
        case '2':
          return '240L';
        case '3':
          return '铁桶';
        default:
          break;
      }
    },
    // 分页导航
    handlePageChange (currentPage) {
      this.currentPage = currentPage;
    },
    handleSizeChange (size) {
      this.pageSize = size;
      this.currentPage = 1;
    },
  }
}
</script>
